<template>
	<view>
		<view class="item-top-box" :style="{'backgroundColor': statusList[info.executeStatus].color}">
			<view class="tag">{{info.label}}</view>
			<view class="orderid">{{info.taskNo}}</view>
			<view class="mask-icon" v-if="Tasktype == 'ALL' || Tasktype == 'TIME'">
				<view class="icon-item" v-if="info.isDayImportanceTask == 1 && sort == false">
					日
				</view>
				<view v-if="info.isWeekImportanceTask == 1 && sort == false" class="icon-item">
					周
				</view>
			</view>
			<view class="mask-icon" v-if="Tasktype == 'ALL' || Tasktype == 'SON'">
				<view class="icon-item son" v-if="info.ptaskId != '' && info.ptaskId != null">
					子
				</view>
			</view>
			<view class="mask-icon" v-if="iswarning == true">
				<image class="icon warning" src="/static/image/warning_icon.png" mode="aspectFit"></image>
			</view>
			<view class="title">{{info.taskName}}</view>
			<view class="status" :style="{'color':statusList[info.executeStatus].color}">{{statusList[info.executeStatus].name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			sort:{ // 是否进行排序
				type:Boolean,
				default:false,
			},
			info:{ // 任务信息
				type:Object,
				default:{},
			},
			Tasktype:{ // 显示任务类型（ALL：全展示，TIME：显示日期，SON：显示子任务）
				type:String,
				default:'ALL',
			},
		},
		data() {
			return {
				statusList: [{ // 任务状态列表
						id: 0,
						name: "未开始" 
					},
					{
						id: 1,
						name: "进行中",
						color:'#6ea7de',
					},
					{
						id: 2,
						name: "已暂停",
						color:'#fcad4e',
					},
					{
						id: 3,
						name: "完成提报中",
						color:'#147797',
					},
					{
						id: 4,
						name: "异常提报中",
						color:'#c8443f'
					},
					{
						id: 5,
						name: "正常完成",
						color:'#7bc094'
					},
					{
						id: 6,
						name: "异常完成",
						color:'#fe0000'
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.item-top-box {
			background-color: #aeb7be;
			height: 80rpx;
			display: flex;
			font-size: 24rpx;
			position: relative;

			.tag {
				background-color: #df548b;
				color: white;
				width: fit-content;
				padding-left: 20rpx;
				padding-right: 20rpx;
				line-height: 50rpx;
				height: 50rpx;
				border-radius: 0 50rpx 50rpx 0;
				margin-top: 16rpx;
			}
			.mask-icon{
				display: flex;
				.icon{
					width: 50rpx;
					height:50rpx;
					margin-top:15rpx;
					margin-left: 10rpx;
					
				}
				.icon-item{
					width:40rpx;
					height:40rpx;
					background-color: #f36c70;
					text-align: center;
					line-height:40rpx;
					color:white;
					margin-top: 20rpx;
					margin-left:10rpx;
					border-radius: 10rpx;
				}
				.son{
					background-color: #929292;
					border-radius: 100%;
				}
			}
			.orderid {
				color: white;
				border: 4rpx solid white;
				height: 40rpx;
				margin-top: 22rpx;
				margin-left: 20rpx;
				padding: 0 10rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				line-height: 30rpx;
				width: fit-content;
			}

			.title {
				color: white;
				line-height: 80rpx;
				font-weight: bold;
				margin-left: 10rpx;

			}

			.status {
				color: #62595c;
				background-color: white;
				border-radius: 65rpx;
				height: 40rpx;
				padding: 0 20rpx;
				line-height: 40rpx;
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}
		}
</style>
